<template>
  <view :class="['vip_gateway', type]">
    <view class="nav-container" v-if="topBar.style ==='custom'">
      <view class="status-contents" :style="{marginTop: topBar.statusBarHeight+'px'}">
        <image src="../../static/white_back.png" mode="widthFix" class="back" @click="toBack"></image>
      </view>
    </view>
    <view :style="{marginTop: topBar.height+'px'}"></view>
    <view class="content">
      <view class="img2"></view>
    </view>
    <view class="bottom" v-if="isVIP">
      <view class="ios-button-container">
        <image src="https://down.qwdata.vip/app_icon/icon_vip_botton.png" @click="goNext" class="img-vip-button"
               mode="widthFix"></image>
        <view class="tips">已经是会员，开始学习</view>
      </view>
    </view>
    <view class="bottom" v-else-if="!canPay">
      <view class="ios-button-container">
        <image src="https://down.qwdata.vip/app_icon/icon_vip_botton.png" @click="toJihuo" class="img-vip-button"
               mode="widthFix"></image>
        <view class="tips">输入激活码，激活会员</view>
      </view>
    </view>
    <view class="bottom" v-else>
      <view class="btns_container" v-if="vipProducts && vipProducts.length">
        <view :class="['btn', selectedProductIndex===0?'active':'']" @click="selectedProductIndex=0">
          <view class="select" v-if="selectedProductIndex===0">已选</view>
          <view class="flag" v-if="kaobuguo &&  vipProducts[0].compensate">考不过补偿60元</view>
          <view class="flag" v-else>开通立省{{ (vipProducts[0].oldPrice - vipProducts[0].fenPrice) / 100 }}元</view>
          {{ vipProducts[0].price }}元/全科永久会员
        </view>
        <view :class="['btn', selectedProductIndex===1?'active':'']" @click="selectedProductIndex=1">
          <view class="select" v-if="selectedProductIndex===1">已选</view>
          {{ otherProduct.price }}元/{{ otherProductTitle }}
        </view>
      </view>
      <view class="productTips">{{ productBottomTips(selectedProduct) }}</view>
      <view class="buy" @click="tryBuy">
        确认协议并付款
      </view>
      <view class="protocol-container">
        <text class="title1">成为会员即表示同意</text>
        <text class="title2" @click="toVip">《驾考会员协议》</text>
      </view>
    </view>
    <LoginView ref="LoginView" @login_success="onLoginSuccess"></LoginView>
    <Pay ref="pay" @success="onPaySuccess"></Pay>
    <BindPhoneDialog ref="BindPhoneDialog"></BindPhoneDialog>
    <Kemu1ProductDialog ref="Kemu1ProductDialog" @buyAllVip="toBuyAllVip" @buyKemu1Vip="tryPay"></Kemu1ProductDialog>
  </view>
</template>
<script>
import {
  mapGetters, mapActions
} from 'vuex'
import Pay from "@/components/Pay.vue";
import LoginView from "@/components/LoginView/LoginView.vue";
import {commonApi} from "@/api";
import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
import Kemu1ProductDialog from "@/components/Kemu1ProductDialog.vue";
import productUtils from "../../libs/productUtils";

export default {
  name: "vip_gateway",
  components: {Kemu1ProductDialog, BindPhoneDialog, Pay, LoginView},
  data() {
    return {
      type: '',
      selectedProductIndex: 0,
      from: null,
      kemu: null
    }
  },
  computed: {
    ...mapGetters(['vipProducts', 'canPay', 'isKemu1VIP', 'isKemu4VIP', 'topBar', 'isLogined', 'kaobuguo', 'haveAuths', 'haveVIP']),
    isLogin() {
      if (this.haveVIP) {
        return true
      }
      return this.haveAuths
    },
    isVIP() {
      if (this.kemu == 1 && this.isKemu1VIP) {
        return true
      }
      if (this.kemu == 4 && this.isKemu4VIP) {
        return true
      }

      return false
    },
    otherProduct() {
      if (this.kemu == 1) {
        return this.vipProducts[1]
      }
      if (this.kemu == 4) {
        return this.vipProducts[2]
      }
    },
    otherProductTitle() {
      if (this.otherProduct) {
        return productUtils.getProductTitle(this.otherProduct)
      } else {
        return ''
      }
    },
    selectedProduct() {
      if(this.selectedProductIndex === 0) {
        return this.vipProducts[0]
      }

      return this.otherProduct
    }
  },
  onLoad({type, from, kemu}) {
    this.type = type
    this.kemu = kemu
    this.from = decodeURIComponent(from)
    console.log(type, from, kemu, this.vipProducts, this.vipProducts.length)
  },
  methods: {
    ...mapActions(['refreshUser']),
    toVip() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip',
      });
    },
    toBack() {
      uni.navigateBack()
    },
    productBottomTips(product) {
      let day = 0
      let dayStr
      let perDay = 0
      let num = 0

      if (product.vipDayUnit === 3) {
        dayStr = '终身'
        num = 0.01
        return '立即开通永久会员，每天仅需' + num + '元'
      } else {
        if (product.vipDayUnit === 1) {
          perDay = 30
        } else if (product.vipDayUnit === 2) {
          perDay = 1
        }
        day = perDay * product.vipDayCount
        num = (Math.floor(product.fenPrice / day) / 100)
        if (num < 0.01) {
          num = 0.01
        }
        dayStr = day + '天'
      }

      // console.log('xxxxxxxxxxxxxxxx', perDay, product)
      return '立即开通会员' + this.unit(product) + '，每天仅需' + num + '元'
    },

    tryBuy() {
      if (this.kemu == 1 && this.selectedProductIndex === 1) {
        this.$refs.Kemu1ProductDialog.open()
      } else {
        this.tryPay()
      }
    },
    toBuyAllVip() {
      this.selectedProductIndex = 0
      this.tryPay()
    },

    async tryPay() {
      if (this.toLogin()) {
        return
      }
      await this.refreshUser()
      if (this.isVIP) {
        return
      }

      this.$refs.pay.open({mode: 'product', from: 'vip', product: this.selectedProduct})
    },
    toLogin() {
      if (!this.isLogin) {
        this.$refs.LoginView.open()
        return true
      }
    },
    unit(product) {
      if (!product) {
        return ''
      }
      const unitList = ['', '个月', '天', '年']
      const str = product.vipDayCount + unitList[product.vipDayUnit]
      if (str === '99年') {
        return '终身VIP'
      }
      return str
    },
    onLoginSuccess() {
      this.$refs.pay.open({mode: 'product', from: 'vip', product: this.vipProducts[this.selectedProductIndex]})
    },
    async onPaySuccess() {
      await this.refreshUser()

      uni.showToast({
        title: '会员支付成功！', icon: 'none', duration: 2000, mask: true
      })
      setTimeout(() => {
        uni.redirectTo({
          url: this.from
        })
      }, 2000)
    },
    goNext() {
      uni.redirectTo({
        url: this.from
      })
    },
    toJihuo() {
      uni.showModal({
        title: '输入激活码',
        editable: true,
        success: async (e) => {
          if (e.cancel) {
            return
          }
          console.log(e)
          if (!e.content || e.content.length < 5) {
            uni.showToast({
              icon: 'none',
              title: '请输入有效激活码'
            })
            return
          }
          try {
            await commonApi.activeVIP(e.content.trim())
            await this.refreshUser()
            uni.showToast({
              title: '激活成功！', icon: 'none', duration: 2000, mask: true
            })
            setTimeout(() => {
              uni.redirectTo({
                url: this.from
              })
            }, 2000)
          } catch (e) {
            uni.showToast({
              icon: 'none',
              title: e.message || '激活失败！'
            })
          }
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.vip_gateway {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;

  .nav-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    color: rgba(240, 173, 78, 0);

    .status-contents {
      height: 44px;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      display: flex;
      color: #fff;
      margin-top: var(--status-bar-height);

      .back {
        width: 36rpx;
        height: 36rpx;
        align-self: center;
      }
    }
  }

  .content {
    flex: 1;
    display: flex;

    .img2 {
      background-size: contain;
      background-repeat: no-repeat;
      background-position-y: top;
      background-position-x: center;
      flex: 1;
    }
  }

  &.miji {
    .content {
      .img2 {
        background-image: url("http://down.qwdata.vip/app_icon/1701249088584");
        margin-bottom: 20rpx;
      }
    }
  }

  &.mijuan {
    .content {
      .img2 {
        background-position-y: bottom;
        background-image: url("http://down.qwdata.vip/app_icon/1701249093927");
      }
    }
  }

  &.jingxuan {
    .content {
      .img2 {
        background-image: url("http://down.qwdata.vip/app_icon/1701249098576");
        margin-bottom: 20rpx;
        margin-left: 45rpx;
      }
    }
  }

  .ios-button-container {
    width: 750upx;
    height: 344upx;
    display: flex;
    justify-content: center;
    bottom: 30rpx;
    z-index: 10;

    .tips {
      font-weight: bold;
      font-size: 32upx;
      color: #683A23;
      position: absolute;
      margin-top: 90rpx;
    }

    .img-vip-button {
      width: 750upx;
      margin-top: 60rpx;
    }
  }

  &.miji {
    background-image: url("http://down.qwdata.vip/app_icon/1701249134313");
  }

  &.mijuan {
    background-image: url("http://down.qwdata.vip/app_icon/1701249139788");
  }

  &.jingxuan {
    background-image: url("http://down.qwdata.vip/app_icon/1701249129192");
  }

  .img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  &.miji {
    .img {
      width: 740rpx;
      margin-left: 10rpx;
      height: 1100rpx;
      align-self: flex-end;
      margin-bottom: 30rpx;
      background-image: url("http://down.qwdata.vip/app_icon/1701249088584");
    }
  }

  &.mijuan {
    .img {
      width: 735rpx;
      align-self: flex-end;
      margin-left: 15rpx;
      height: 1100rpx;
      background-image: url("http://down.qwdata.vip/app_icon/1701249093927");
    }
  }

  &.jingxuan {
    .img {
      width: 710rpx;
      margin-left: 40rpx;
      height: 940rpx;
      align-self: flex-end;
      margin-bottom: 50rpx;
      background-image: url("http://down.qwdata.vip/app_icon/1701249098576");
    }
  }

  .protocol-container {
    margin-bottom: 30rpx;
    text-align: center;

    .title1 {
      font-size: 22upx;
      color: #B1B1B1;
    }

    .title2 {
      font-size: 22upx;
      color: #5A5A5A;
    }
  }

  .bottom {
    background-color: rgba(255, 255, 255, 1);

    .productTips {
      text-align: center;
      margin-top: 30rpx;
      color: #F56F56;
    }

    .buy {
      background-image: linear-gradient(106deg, #E97A59 7%, #F15642 48%, #E64428 98%);
      border-radius: 100rpx;
      height: 108rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      margin: 32rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .btns_container {
      display: flex;

      .btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #88685F;
        height: 100rpx;
        border-radius: 12rpx;
        margin: 23rpx;
        font-size: 16px;
        color: #702914;
        font-weight: bold;
        margin-bottom: 0;
        box-sizing: border-box;
        position: relative;
        @keyframes tiao {
          0% {
            transform: translateY(-5px);
          }
          50% {
            transform: translateY(0);
          }
          100% {
            transform: translateY(-5px);
          }
        }

        .flag {
          position: absolute;
          font-size: 12px;
          color: #FFFCF9;
          z-index: 1;
          top: -25rpx;
          padding: 5rpx 40rpx;
          right: 10rpx;
          background-image: linear-gradient(102deg, #FF7610 0%, #FA4538 54%, #FE5E60 93%);
          border-radius: 12px 12px 12px 0;
          animation: tiao 1000ms infinite;
        }

        .select {
          position: absolute;
          left: 0;
          top: 0;
          background-image: linear-gradient(116deg, #FBDFCD 0%, #FBC59F 95%);
          border-radius: 10rpx 0 12rpx 0;
          font-size: 10px;
          color: #201C1B;
          padding: 5rpx 15rpx;
        }

        &.active {
          background: #1A1E27;
          border: none;
          color: #fff;
        }

        &:first-child {
          margin-left: 32rpx;
        }

        &:last-child {
          margin-right: 32rpx;
          margin-left: 0;
        }
      }
    }
  }
}
</style>
